body {
    background-color: rgb(255, 255, 255);
    margin-left: auto;
    margin-right: auto;
    text-align: center;


}
h1 {
    text-align: center;

}


/*PopupFenster*/

.idPopupContainer {
    width: 100%;
    height: 15000px;
    background: #0000009d;
    border: #000;
    z-index: 1;
    top: 50%;
    transform: translate(0%,-50%) ;
    visibility: hidden;
}


.idPopupFenster {
    
    position: flex;
    width: 600px;
    background: rgb(0, 0, 0);
    color: white;
    border-radius: 20px;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%) ;
    text-align: center;
    padding: 0 30px 30px;
    box-shadow: 0 0 30px #000;
    z-index: 1;
    visibility: hidden;
    transition: transform 0.4s, top 0.4s;
}


.idPopupFenster img{
    width: 300px;
    margin-top: -200px;

}

.idPopupFenster h2 {
    font-size: 40px;
    font-weight: 500;
    margin: 30px 0 20px;
}

.idPopupFenster button {
    width: 100%;
    margin-top: 50px;
    padding: 10px 0;
    background: white;
    border: none;
    outline: none;
    border-radius: 10px;
    color: #000;
    font-size: 20px;
    box-shadow: 0 0 10px rgb(255, 255, 255);
    transition: .3s;
}

.idPopupFenster button:hover{
    transform:   scale(1.1);
    box-shadow: 0 0 30px rgb(18, 219, 0);
    background: rgb(18, 219, 0);
}

.popuplink{
    color: greenyellow;
    text-decoration: none;
    transition: .3s;
}

.popuplink:hover{
    text-decoration: underline;
    color: greenyellow;
}



/*PopupFenster ende*/


/*Startseite text*/
.begrueßung {
    margin-left: auto;
    margin-right: auto;
    width: 99,2%;
   
}

.begrueßung p {
    font-size: 2em;
}
/*Startseite text ende*/

/*Startseite text*/
.id100tagechallengetext {
    margin-left: auto;
    margin-right: auto;
    width: 99,2%;
   
}

.id100tagechallengetext p {
    font-size: 2em;
}
/*Startseite text ende*/




/*bilder automatisch skaliren*/
.banner {
    width: 100%;
    height: auto;
    box-shadow: 0 0 15px #000;
}
/*bilder automatisch skaliren*/

/*Sozialmedia icons*/

.box-icon {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    
}

.box-icon .dream-icon img{
    height: 130px;
    transition: all 1.5s ease;

}

/*Sozialmedia icons ende*/

/*Portfolio icons*/

.box-icon .portfolio-icon img{
    height: 560px;
    border-radius: 10px;
    box-shadow: 0 0 10px #000;
    transition: all 2s ease;

}

/*Portfolio icons ende*/

/*galerie neu*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif;
}

.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 40px 20px 0 20px;
}

.container .heading{
    width: 50%;
    padding-bottom: 50px;
    animation-name: line-in;
    animation-timeline: view(700px 1px); 
}

.container .heading h3 {
    font-size: 4em ;
    font-weight: 900;
    border-bottom: 3px solid rgb(20, 20, 20);
    padding-bottom: 10px;
    

}

.container .heading h3 span{
    font-weight: 100;
    
}
.container .heading2{
    width: 50%;
    padding-bottom: 50px;
}

.container .heading2 h3 {
    font-size: 4em ;
    font-weight: 900;
    border-bottom: 3px solid rgb(20, 20, 20);
    padding-bottom: 10px;
    

}

.container .heading2 h3 span{
    font-weight: 100;
    
}


.container .heading3{
    width: 50%;
    padding-bottom: 50px;
}

.container .heading3 h3 {
    font-size: 4em ;
    font-weight: 900;
    border-bottom: 3px solid rgb(20, 20, 20);
    padding-bottom: 10px;
    

}

.container .heading3 h3 span{
    font-weight: 100;
    
}

.container .idzwischenueberschrift{
    width: 25%;
    padding-bottom: 50px;
}

.container .idzwischenueberschrift h3 {
    font-size: 3em ;
    font-weight: 900;
    border-bottom: 3px solid rgb(20, 20, 20);
    padding-bottom: 10px;
    

}

.container .idzwischenueberschrift h3 span{
    font-weight: 100;
    
}

.container .box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    
    }

.container .box .dream{
    display: flex;
    flex-direction: column;
    width: 32,5%;
    height: 32,5;
}

.container .box .dream img{
    width: 99%;
    padding-bottom: 5px;
    border-radius: 20px ;
    transition: all 1s ease;
    box-shadow: 0 0 10px #000;
    
   
}


/*popup gallery*/
.container .idpopup-image{
    position: fixed;
    top: 0; left: 0;
    background-color: rgba(0,0,0,.9);
    height: 100%;
    width: 100%;
    z-index: 100;
    display:none ;
}

.container .idpopup-image span{
    position: absolute;
    top: 0; right: 10px;
    font-size: 60px;
    font-weight: bolder;
    color: white;
    cursor: pointer;
    z-index: 100;
}

.container .idpopup-image img {
    position: absolute ;
    top: 50%; left: 50%;
    transform: translate( -50%, -50%);

    border-radius: 15px;
    height: 930px;
    border: 2px solid rgba(255, 255, 255, 0.486);
    box-shadow: 0 0 30px rgb(228, 228, 228);
    


    object-fit: cover;
}

/*popup gallery Ende*/
/*galerie ende*/


/*blog*/


.blog {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    margin: 10px 5px 100px 5px;
    
    border-radius: 30px;

}

.blog .card{
    margin: 20px 20px 20px 20px;
    width: 95%;
     background-color: rgb(255, 255, 255);
     border-radius: 8px;
     box-shadow: 0 0 10px #000;
}

.blog .card .fakeimg img {
    height: 400px;
    box-shadow: 0 0 10px #000;
    transition: all 2s ease;
}

/*blog ende*/
/*blog Popup img*/
.blog .idpopup-image{
    position: fixed;
    top: 0; left: 0;
    background-color: rgba(0,0,0,.9);
    height: 100%;
    width: 100%;
    z-index: 100;
    display:none ;
}

.blog .idpopup-image span{
    position: absolute;
    top: 0; right: 10px;
    font-size: 60px;
    font-weight: bolder;
    color: white;
    cursor: pointer;
    z-index: 100;
}

.blog .idpopup-image img {
    position: absolute ;
    top: 50%; left: 50%;
    transform: translate( -50%, -50%);

    border-radius: 15px;
    height: 930px;
    border: 2px solid rgba(255, 255, 255, 0.486);
    box-shadow: 0 0 30px rgb(228, 228, 228);
    


    object-fit: cover;
}

/*blog Popup img ende*/

/*blog einblendung blog*/
.blogview2 {
    height: 700px;
    width: 101%;
    margin-left: auto;
    margin-right: auto;
    border: none;
}

/*blog einblendung startseite*/

.blogview {
    height: 700px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: none;
}

/*blog einblendung startseite ende*/

/*kontaktfurmolar*/

.contact form {
    width: 600px;
    text-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

form .input-box {
    display: flex;
    justify-content: space-between;
}

.input-box .input-field {
    width: 48%;

}

.field .item {
    width: 100%;
    padding: 18px;
    background: transparent;
    border: 2px solid rgb(29, 29, 29);
    outline: none;
    border-radius: 6px;
    font-size: 16px;
    color: rgb(0, 0, 0);
    margin: 12px;
    box-shadow: 0 0 10px #000;
}

.field .item::placeholder {
    color: rgb(0, 0, 0)
}


    


form button {
    padding: 12px 32px;
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(29, 29, 29);
    outline: none;
    border-radius: 5px;
    box-shadow: 0 0 10px #000;
    font-size: 16px;
    font-weight: 600;
    color: rgb(0, 0, 0);
    cursor: pointer;
    margin-top: 20px;
    transition: .5s;

}

form button:hover{
    background-color: rgb(230, 230, 230);
    box-shadow: none;
}

/*bestädigung kontaktformular*/

.bestaedigung {
    
    color: green;
}


/*kontaktformular ende*/
/*Datenschutz Layout*/

.datenschutz {

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    margin: 10px 5px 100px 5px;
    
    border-radius: 30px;

}


.datenschutz .kapitel {
    margin: 20px 20px 20px 20px;
    width: 95%;
     background-color: rgb(255, 255, 255);
     border-radius: 8px;
     box-shadow: 0 0 10px #000;
}

.datenschutz .kapitel ul {

    list-style-type: none;
}



/*Datenschutz Layout Ende*/

/* youtube-video anpassen*/

.youtube-video iframe {
    border-radius: 20px;
    box-shadow: 0 0 20px #000;
}


/*shop seite*/

/*shop bild anpassen*/

.shop-img {
    width: 100%;
    height: auto;
    
}
 /*shop seite ende*/


.idshop{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 20px 10px 0 10px;

}

.idshop .idshopzeile {
    display: flex;
    flex-direction: row;
    justify-content: center;
    box-shadow: 0 0 10px #000;
    border-radius: 15px;    
    }

.idshop .idshopzeile h3 {
    font-size: 2em;
    align-items: center;
    display:flex;
    margin-left: 20px;
}



.idshop .idshopzeile .idshopobjekt{
    display: flex;
    flex-direction: column;
    margin: 70px;
    width: 32,5%;
    height: 32,5;
    border-radius: 15px;
   
    
}

.idshop .idshopzeile .idshopobjekt img{
    height: 250px;
    border-radius: 15px;
    box-shadow: 0 0 10px #000;

}

.idshop .idshopzeile .idshopobjekt .idshopobjekt-name{
    font-size: 25px;
    margin: 10px;
}
.idshop .idshopzeile .idshopobjekt .idshopbutten{
    text-decoration: none;
    background-color: rgb(180, 180, 180);
    border: none;
    border-radius: 15px;
    color: rgb(0, 0, 0);
    padding:  15px 20px;
    text-align: center;
    display: flex;
    font-size: 20px;
    margin:  1%;
    cursor: pointer;
    box-shadow:  0 8px 16px 0 rgb(0, 0, 0);
    transition: .3s;
}